import { Card, Image, Divider, Popup, Toast, ErrorBlock } from 'antd-mobile'
import { getArticlesInfo } from '@/api/home'
import "./list.scss"
import { useNavigate } from "react-router-dom"
import { ReactEventHandler, useEffect, useState } from 'react'
import { getArticles as getArticles1, delArticles } from '@/api/manage/manage'
import { getArticles } from '@/api/home'
import userStore from '@/store/userStore'
function Clist() {
    const navigate = useNavigate()
    const { list, setList } = userStore()
    const toGetList = async () => {
        let result = await getArticles({})
        if (result && result.status == 200) {
            setList(result.data.data.results)
        } else {
            Toast.show({
                icon: 'fail',
                content: '获取文章失败！',
            })
        }
    }

    const del = async (e: any) => {
        let result = await delArticles(info.id)
        if (result.status === 200) {
            await toGetList()
            //   data.del1(list)
            Toast.show({
                icon: 'success',
                content: '删除文章成功！',
            })
        } else {
            Toast.show({
                icon: 'fail',
                content: '删除文章失败！',
            })
        }
        setEditAndDel(false)
    }
    //useEffect(()=>{
    //    setList(data.data)
    //},[data.data])
    //const [list,setList] = useState([]);
    const [editAndDel, setEditAndDel] = useState(false)
    const [info, setInfo] = useState<any>();


    const use = (data: any) => {
        setInfo(data)
        setEditAndDel(true)
    }


    function edit() {
        navigate('/Create', { state: { id: info.id } })
        //navigate(`/Create/${info.id}`)
        setEditAndDel(false)
    }



    return (
        <div className='container1'>

            {list.length > 0 ? list.map(item => (<div key={item.id}><Card bodyClassName='ca' onClick={() => use(item)}>
                {
                    item.cover.images.length === 0 ?
                        <div className='font1'>
                            <p className='title1'>{item.title}</p>
                            <p className='text1'>{item.pubdate}</p>
                        </div>
                        :
                        <>
                            <Image
                                className='img'
                                src={item.cover.images?.[0]}

                                fit="cover"
                                width={40}
                                height={40}
                            />
                            <div className='font'>
                                <p className='title'>{item.title}</p>
                                <p className='text'>{item.pubdate}</p>
                            </div>
                        </>
                }

            </Card>
                <Popup
                    visible={editAndDel}
                    onMaskClick={() => {
                        setEditAndDel(false)
                    }}
                    maskStyle={{ background: "rgba(70,70,70,0.2)" }}
                    bodyStyle={{
                        borderTopLeftRadius: '8px',
                        borderTopRightRadius: '8px',
                        minHeight: '30vh',
                    }}
                >
                    <p style={{ height: "10vh", textAlign: 'center', lineHeight: '10vh', fontSize: '1.3rem' }} onClick={() => { edit() }}>修改</p>
                    <Divider style={{ margin: 0, padding: '0.1rem' }} />
                    <p style={{ height: "10vh", textAlign: 'center', lineHeight: '10vh', fontSize: '1.3rem', color: 'red' }} onClick={(e) => del(e)}>删除</p>
                    <Divider style={{ margin: 0, padding: '0.1rem' }} />
                </Popup>
                <Divider />


            </div>)) : <ErrorBlock fullPage status='empty' />}
        </div>
    )
}
export default Clist

